<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<%@ include file="/app_css/app_layout.jsp"%>
<link href="http://static.aceona.com/api_demo/css/api_common.css" rel="stylesheet" type="text/css" />
</head>

<body class="bg_a">
<div class="api_com_position"> <span class="api_position_main">前端开发规范</span>|<span class="red_a">前端页面规范及注意事项</span> </div>
<div class="api_content">
	<h1>常用字体，链接，标题等常用样式</h1>
	<ol class="api_ol_a">
		<li>
			<div class="title_effect">
				<h6>常用字体类效果展示:</h6>
				<div class="title_content"> 
					<!--code bec-->
					<p><em>class=&quot;hui_link&quot;</em><a href="#" class="hui_link m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;hui_c&quot;</em><a  href="#" class="hui_c m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;hui_d&quot;</em><a  href="#" class="hui_d m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;hui_g&quot;</em><a  href="#" class="hui_g m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;hui_b&quot;</em><a  href="#" class="hui_b m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;hui_ud&quot;</em><a  href="#" class="hui_ud m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;f_blue&quot;</em><a  href="#" class="f_blue m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;f_blue_b&quot;</em><a  href="#" class="f_blue_b m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;f_blue_c&quot;</em><a  href="#" class="f_blue_c m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;f_blue_d&quot;</em><a  href="#" class="f_blue_d m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_blue_d&quot;</em><a  href="#" class="a_blue_d m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_blue_b&quot;</em><a  href="#" class="a_blue_b m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;f_red&quot;</em><a  href="#" class="f_red m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;b40_ud&quot;</em><a  href="#" class="b40_ud m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;f30_ud&quot;</em><a  href="#" class="f30_ud m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;fb_f30&quot;</em><a  href="#" class="fb_f30 m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;fb_red&quot;</em><a  href="#" class="fb_red m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;fb14_red&quot;</em><a  href="#" class="fb14_red m_l_10">标准测试链接</a></p>
					<!--code end--> 
				</div>
			</div>
		</li>
		<li>
			<div class="title_effect">
				<h6>常用链接类效果展示:</h6>
				<div class="title_content"> 
					
					<!--code bec-->
					<p><em>class=&quot;hui_link&quot;</em><a  href="#" class="hui_link m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;hui_c_link&quot;</em><a  href="#" class="hui_c_link m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;hui_ud&quot;</em><a  href="#" class="hui_ud m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a40&quot;</em><a  href="#" class="a40 m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;b40&quot;</em><a  href="#" class="b40 m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;b40_tdn&quot;</em><a  href="#" class="b40_tdn m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;b40_ud&quot;</em><a  href="#" class="b40_ud m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;f30_ud&quot;</em><a  href="#" class="f30_ud m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;f30_noline&quot;</em><a  href="#" class="f30_noline m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_red_v2_a&quot;</em><a  href="#" class="a_red_v2_a m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;fb14_red&quot;</em><a  href="#" class="fb14_red m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;fb14_a40&quot;</em><a  href="#" class="fb14_a40 m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;fb15_red&quot;</em><a  href="#" class="fb15_red m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_green&quot;</em><a  href="#" class="a_green m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_blue&quot;</em><a  href="#" class="a_blue m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_blue_b&quot;</em><a  href="#" class="a_blue_b m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_blue_c&quot;</em><a  href="#" class="a_blue_c m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_blue_d&quot;</em><a  href="#" class="a_blue_d m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_blue_e&quot;</em><a  href="#" class="a_blue_e m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;a_blue_g&quot;</em><a  href="#" class="a_blue_g m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;app_link_a&quot;</em>效果展示：<a  href="#" class="app_link_a m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;app_arrow_b&quot;</em>效果展示：<a  href="#" class="app_arrow_b m_l_10">标准测试链接</a></p>
					<p><em>class=&quot;now_tj&quot;</em>效果展示：<a  href="#" class="now_tj m_l_10">标准测试链接</a></p>
					<p><span class="app_arrow_a">我是测试文字</span></p>
					<!--code end--> 
					
				</div>
			</div>
		</li>
		<li>
			<div class="title_effect">
				<h6>常用标题类效果展示:</h6>
				<div class="app_title_a">我是测试标题</div>
			</div>
			<div class="m_t_20 uc_visit_box app_box_mod app_box_a_v4">
				<div class="item_head c">
					<h3 class="item_title">我也是测试标题哦</h3>
					<a class="more a_green small" href="">MORE</a> </div>
				<div class="item_body"> 正文 </div>
			</div>
		</li>
		<li>
			<div class="title_effect">
				<h6>常用线框分类</h6>
				<div class="app_box_a">边线框类1</div>
				<div class="app_box_b m_t_8">边线框类2</div>
			</div>
		</li>
		<li>
			<div class="title_effect">
				<h6>常用图片类效果</h6>
				<div class="c"> <a href="#" class="app_img_a l"><img src="http://f1.aceona.com:9000/uploadimg/thumbnailpath/2010/6/4/1275623500087.jpg" width="50" height="50"></a> </div>
				<div class="c"> <a href="#" class="app_user_icon l"><img src="http://f1.aceona.com:9000/uploadimg/thumbnailpath/2010/6/4/1275623500087.jpg" width="50" height="50"></a> </div>
				<div class="c"> <a href="#" class="app_head_icon l"><img src="http://f1.aceona.com:9000/uploadimg/thumbnailpath/2010/6/4/1275623500087.jpg" width="50" height="50"></a> </div>
				<div class="c"> <a href="#" class="app_user_header_icon l"><img src="http://f1.aceona.com:9000/uploadimg/thumbnailpath/2010/6/4/1275623500087.jpg" width="50" height="50"></a> </div>
			</div>
		</li>
		<li>
			<div class="title_effect">
				<h6>常用图标类效果</h6>
				<div class="c">
					<p><em class="app_icon_coin"></em>图标效果吧</p>
					<p><em class="app_icon_man"></em>图标效果吧</p>
					<p><em class="app_icon_woman"></em>图标效果吧</p>
					<p><em class="app_mes_icon"></em>图标效果吧</p>
					<p><em class="app_icon_male"></em>图标效果吧</p>
					<p><em class="app_icon_female"></em>图标效果吧</p>
					<p><em class="app_top_icon"></em>图标效果吧</p>
					<p><em class="app_img_icon"></em>图标效果吧</p>
					<p><em class="app_say_icon"></em>图标效果吧</p>
					<p><em class="app_note_icon_a"></em>图标效果吧</p>
					<p><em class="app_ly_icon"></em>图标效果吧</p>
					<p><em class="app_jing_icon"></em>图标效果吧</p>
					<p><em class="app_heart_icon"></em>图标效果吧</p>
					<p><em class="app_star_icon"></em>图标效果吧</p>
					<p><em class="app_addfriend_icon"></em>图标效果吧</p>
					<p><em class="app_xb_icon"></em>图标效果吧</p>
					<p><em class="app_small_right_icon"></em>图标效果吧</p>
					<p><em class="app_aicon_add"></em>图标效果吧</p>
					<p><em class="app_aicon_del"></em>图标效果吧</p>
					<p><em class="invite_friend_icon"></em>图标效果吧</p>
					<p><em class="invite_handle_icon"></em>图标效果吧</p>
					<p><em class="app_icon_deny"></em>图标效果吧</p>
					<p><em class="app_icon_error"></em>图标效果吧</p>
					<p><em class="app_icon_warn"></em>图标效果吧</p>
					<p><em class="app_icon_right"></em>图标效果吧</p>
				</div>
			</div>
		</li>
		<li>
			<div class="title_effect">
				<h6>常用表单样式:</h6>
				<p>
					<input type="text" class="app_input_a" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_b" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_i" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_font" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_d" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_focus" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_e" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_f" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_h" />
				</p>
				<p class="m_t_8">
					<textarea type="text" class="app_input_c"></textarea>
				</p>
				<p class="m_t_8">
					<textarea type="text" class="app_textarea_a"></textarea>
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_b_focus" />
				</p>
				<p class="m_t_8">
					<input type="text" class="app_input_b_error" />
				</p>
				<h6>常用按纽类</h6>
				<p>
					<button class="app_btn_a"></button>
				</p>
				<p class="m_t_8"><a class="app_upload_btn" href="#"><span>立即上传</span>
					<input type="file" />
					</a></p>
				<p class="m_t_8">
					<button class="b_btn_e"></button>
				</p>
				<p class="m_t_8">
					<button class="b_btn_f"></button>
				</p>
				<p class="m_t_8">
					<button class="b_btn_g"></button>
				</p>
				<p class="m_t_8">
					<button class="b_btn_e"></button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_b">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_b_cancel">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_no">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_send">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_d">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_e">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_f">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_upload_b">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_upload_resume">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_i">我是按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_k">尾款支付</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_m">尾款支付</button>
				</p>
				<p class="m_t_8">
					<button class="app_btn_n">尾款支付</button>
				</p>
				<p class="m_t_8">
					<button class="app_pgbtn_c">定金支付</button>
				</p>
				<p class="m_t_8">
					<button class="app_pgbtn_d">定金支付</button>
				</p>
				<p class="m_t_8">
					<button class="app_search_btn_a">搜索按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_search_btn_b">搜索按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_search_btn_c">搜索按纽</button>
				</p>
				<p class="m_t_8">
					<button class="app_go_btn">GO</button>
				</p>
				<p class="m_t_8"><a class="app_retieve_btn2"><span>搜索按纽</span></a></p>
				<br style="clear:both" />
				<h6>自适应大小的按纽</h6>
				<p> <a href="#" class="app_autobtn_a"><span>我是测试的按纽</span></a></p>
				<p class="m_t_8"><a href="#" class="app_autobtn_b"><span>我是测试的按纽</span></a></p>
				<p class="m_t_8"><a href="#" class="app_autobtn_c"><span>我是测试的按纽</span></a></p>
				<p class="m_t_8"><a href="#" class="app_btn_mgt"><span>管理一下11111</span></a></p>
				<br style="clear:both" />
				<p class="m_t_8"><a href="#" class="app_enter_a"><span>管理一下11111</span></a></p>
				<br style="clear:both" />
				<p class="m_t_8"><a href="#" class="app_enter_b"><span>管理一下11111</span></a></p>
				<br style="clear:both" />
			</div>
		</li>
	</ol>
	<div class="title_effect">
		<h6>常用列表形式:(.app_ul_a)</h6>
		<ul class="app_ul_a">
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
		</ul>
		<h6>常用列表形式:(.app_ul_b)</h6>
		<ul class="app_ul_b">
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
		</ul>
		<h6>常用列表形式:(.app_ul_c)</h6>
		<ul class="app_ul_c">
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
		</ul>
		<h6>常用列表形式:(.app_ul_d)</h6>
		<ul class="app_ul_d">
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
		</ul>
		<h6>常用列表形式:(.app_ul_e)</h6>
		<ul class="app_ul_e">
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
		</ul>
		<h6>常用列表形式:(.app_ul_f)</h6>
		<ul class="app_ul_f">
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
		</ul>
		<h6>常用列表形式:(.app_ul_g)</h6>
		<ul class="app_ul_g">
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
			<li><a href="" title="">我是测试的数据列表</a></li>
		</ul>
	</div>
	<h6>常用分页</h6>
	<div class="c">
		<div class="app_page_list r"> <a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)" class="current">3</a> <span class="page_span">......</span> <a href="javascript:void(0)">7</a> <a href="javascript:void(0)">8</a> <a href="javascript:void(0)">9</a> <a href="javascript:void(0)">查看全部成员</a> </div>
	</div>
	<div class="c">
		<div class="app_page_list r"> <a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)" class="current">3</a> <span class="page_span">......</span> <a href="javascript:void(0)">7</a> <a href="javascript:void(0)">8</a> <a href="javascript:void(0)">9</a> <a href="javascript:void(0)">查看全部成员</a> </div>
	</div>
	
	<div class="app_pager_a c">
		<div class="wrapper_l l"><a href="javascript:void(0)" class="first">首页</a> <a title="上一页" href="javascript:void(0)" class="sprite prev"></a> <span class="pages"> <a href="javascript:void(0)" class="active">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)">3</a> <a href="javascript:void(0)">4</a> <a href="javascript:void(0)">5</a> ...... </span>
			<a title="下一页" href="javascript:void(0)" class="sprite next"></a> <a href="javascript:void(0)" class="end">尾页</a></div>
		<div class="wrapper_r r"><span>第</span>
			<input type="text" class="setpage">
			<span>页</span> <a href="javascript:void(0)" class="sprite go"></a>
		</div>
	</div>
	
</div>
<script type="text/ecmascript" src="http://static.aceona.com/app_js/jquery.js"></script> 
<script type="text/javascript" src="http://static.aceona.com/api_demo/api_js/api_test.js"></script> 
<script type="text/javascript" src="http://static.aceona.com/api_demo/api_js/api_voke.js"></script>
</body>
</html>
